<template>
	<view class="container">
		<view class="center-box">
			<u-icon name="account-fill" size="80" style="background-color: red;"></u-icon>
			<button type="default" @click="getUserInfo" >一键登录</button>
			<text>登录后享受更多权益</text>
		</view>	
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import { getWeChat } from '@/config/api.js';
	export default {
		name:"my-login",
		data() {
			return {
				list: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','1','2','3','4','5'],
				createToken: ''
			};
		},
		methods:{
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			getUserInfo() {
			    // 判断是否获取用户信息成功 getUserProfile:fail auth deny	
			    // // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
				uni.getUserProfile({
					desc:'登录',
					success:(res)=>{
						if(res.errMsg === "getUserProfile:ok"){
							this.updateUserInfo(res)
						}
						// this.updateUserInfo
						this.getToken(res)
					},
					fail:(err)=>{
						if(err.errMsg === 'getUserProfile:fail auth deny') 
						return this.$u.toast('您取消了登录授权')
						// console.log(err);
					}
				})
			  },
			async getToken(info) {
			  // 调用微信登录接口
			  const [err, res] = await uni.login().catch(err => err)
			  // 判断是否 uni.login() 调用失败
			  if (err || res.errMsg !== 'login:ok') return this.$u.toast('登录失败！')
			  // 准备参数对象
			  const query = {
			    code: res.code,
			    encryptedData: info.encryptedData,
			    iv: info.iv,
			    rawData: info.rawData,
			    signature: info.signature
			  }
			  // 换取 token 接口无了。token无了
			  
			  for (var i = 1; i < this.list.length; i++) {
				  if(this.createToken.length <= 12){
					  const num = parseInt(Math.random()*20) 
					  this.createToken += this.list[num]
				  }
			  }
			  this.updateToken(this.createToken)
			  // const loginResult = await getWeChat('/api/public/v1/users/wxlogin', query)
			  
			  // this.$u.toast('登录成功')
			}
		}
	}
</script>

<style lang="scss">
	.center-box {
		display: flex;
		height: 900rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background-color: #f8f8f8;
		position: relative;

		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 40px;
			background-color: white;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 100%;
			transform: translateY(50%);
		}
		button {
			width: 70%;
			margin: 20rpx 0rpx; 
			border-radius: 16px;
			background-color: #c00000;
			color: #FFFFFF;
		}
		text {
			font-size: 12px;
			opacity: 0.6
		}
	}
</style>
